---
title: Dock
date: 2024-04-25
description: An implementation of the MacOS dock using react + tailwindcss + framer motion
author: nyxb
published: true
video: https://cdn.nyxbui.design/dock.mp4
---

<ComponentPreview name="dock-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add dock
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dock" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Custom Direction

<ComponentPreview name="dock-demo-2" />

### Custom magnification

<ComponentPreview name="dock-demo-3" />

## Props

### Dock

| Prop          | Type      | Description                          | Default  |
| ------------- | --------- | ------------------------------------ | -------- |
| className     | string    | Custom CSS class for styling         | -        |
| children      | ReactNode | Children elements                    | -        |
| magnification | number    | Level of icon magnification          | 60       |
| distance      | number    | Distance from cursor to magnify icon | 140      |
| direction     | string    | Direction of the dock                | "bottom" |

### DockIcon

| Prop          | Type              | Description                          | Default |
| ------------- | ----------------- | ------------------------------------ | ------- |
| size          | number            | Size of the icon                     | -       |
| magnification | number            | Level of icon magnification          | 60      |
| distance      | number            | Distance from cursor to magnify icon | 140     |
| mouseX        | any               | Mouse X position for magnification   | -       |
| className     | string            | Custom CSS class for styling         | -       |
| children      | React.ReactNode   | Children elements                    | -       |
| props         | PropsWithChildren | Additional props                     | -       |
